import React, { useEffect, useState } from 'react';
import ReactDOM, { unstable_batchedUpdates } from 'react-dom';
import useCountDown from './hooks/useCountdown.ts';
import useBoolean from './hooks/useBoolean.js';
import usePrevious from './hooks/usePrevious.ts';

// function App() {
//   const [count, setCount] = useState(1)
//   useEffect(() => {
//     setTimeout(() => {
//       console.log(`You clicked ${count} times`);
//     }, 3000);
//   })
//   return (
//     <>
//       <div>{count}</div>
//       <div onClick={() => setCount(count => ++count)}>点我</div>
//     </>
//   )
// }

function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(1);
  const [c, setC] = useState(1);

  const handle = () => {
    // 使用setTimeout Promise.resovlve 导致批量更新失效
    // 可以用unstable_batchedUpdates手动批量更新
    Promise.resolve().then(() => {
      unstable_batchedUpdates(() => {
        setA(a + 1);
        setB(b + 1);
        setC(c + 1);
      });
    });
  };

  // const onEnd = () => {
  //   alert('End of the time');
  //   console.log('onEnd of the time');
  // };

  // const [countdown, setTargetDate] = useCountDown({
  //   onEnd: onEnd,
  // });

  // const [countdown, setTargetDate, formattedRes] = useCountDown({
  //   targetDate: '2021-12-02 24:00:00',
  // });
  // const { days, hours, minutes, seconds } = formattedRes;

  // const [state, { toggle, setTrue, setFalse }] = useBoolean(true);

  const [count, setCount] = useState(0);
  const previous = usePrevious(count);
  console.log('previous: ', previous);

  const nameCompareFunction = (prev, next) => {
    if (!prev) {
      return true;
    }
    if (prev.name !== next.name) {
      return true;
    }
    return false;
  };

  const jobCompareFunction = (prev, next) => {
    if (!prev) {
      return true;
    }
    if (prev.job !== next.job) {
      return true;
    }
    return false;
  };

  const [persion, setPersion] = useState({ name: 'Jack', job: 'student' });
  const [nameInput, setNameInput] = useState('');
  const [jobInput, setJobInput] = useState('');
  const previousName = usePrevious(persion, nameCompareFunction);
  const previousJob = usePrevious(persion, jobCompareFunction);

  // console.log(`render`);
  return (
    <>
      {/* <p>
        There are {days} days {hours} hours {minutes} minutes {seconds} seconds
      </p> */}

      {/* <div>
        <p>Effects：{JSON.stringify(state)}</p>
        <p>
          <button type="button" onClick={() => toggle()}>
            Toggle
          </button>
          <button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>
            Set false
          </button>
          <button type="button" onClick={setTrue}>
            Set true
          </button>
        </p>
      </div> */}

      <div>current value: {count}</div>
      <div style={{ marginBottom: 8 }}> previous value: {previous}</div>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        increase
      </button>
      <button
        type="button"
        style={{ marginLeft: 8 }}
        onClick={() => setCount((c) => c - 1)}
      >
        decrease
      </button>

      <div style={{ margin: '8px 0', border: '1px solid #e8e8e8', padding: 8 }}>
        <div>current name: {persion.name}</div>
        <div>current job: {persion.job}</div>
      </div>
      <div>previous name: {(previousName || {}).name}</div>
      <div style={{ marginBottom: 8 }}>
        previous job: {(previousJob || {}).job}
      </div>
      <div style={{ marginTop: 8 }}>
        <input
          style={{ width: 220 }}
          value={nameInput}
          onChange={(e) => setNameInput(e.target.value)}
          placeholder="new name"
        />
        <button
          type="button"
          onClick={() => {
            setPersion((s) => ({ ...s, name: nameInput }));
          }}
          style={{ marginLeft: 8 }}
        >
          update
        </button>
      </div>
      <div style={{ marginTop: 8 }}>
        <input
          style={{ width: 220 }}
          value={jobInput}
          onChange={(e) => setJobInput(e.target.value)}
          placeholder="new job"
        />
        <button
          type="button"
          onClick={() => {
            setPersion((s) => ({ ...s, job: jobInput }));
          }}
          style={{ marginLeft: 8 }}
        >
          update
        </button>
      </div>

      {/* <button
        onClick={() => {
          setTargetDate(Date.now() + 5000);
        }}
        disabled={countdown !== 0}
      >
        {countdown === 0
          ? 'Start Interval'
          : `Reset After ${Math.round(countdown / 1000)}s`}
      </button> */}

      <div>{a}</div>
      <div>{b}</div>
      <div>{c}</div>
      <div onClick={handle}>点我</div>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
